<template>
	
	<view class="kef">
		<view class="box" >
			<view class="kf_top flex" >
				<dl v-for="(item,index) in list" :key="index" class="" @click="goNews(item.id)">
					<dt>
						<image :src="item.img" mode=""></image>
					</dt>
					<dd>{{item.text}}</dd>
				</dl>
			</view>
		</view>
		<view class="box1">
			<view class="box_bottom">
				<view class="flex b_b_one" @click="input()">
					<p>帮助中心</p>
					<input type="text" placeholder="搜索您的问题">
				</view>
				<view class="new-file">
				  <!-- 第二种方法 -->
				  <view class="head-nav">
				    <!-- 头部选项卡 -->
				   <view :class="listIndex==index?'activite':''" @click="checkListIndex(index)" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
				  </view>
				  <!-- 内容 -->
				  <view class="content">
				     <view class="contents" v-if="listIndex==0" v-for="(item,index) in list2" :key="index" @click="goone()">
				      <p>{{item.p1}}</p>
				     </view>
						 <view class="contents" v-if="listIndex==1" v-for="(item,index) in list3" :key="index" @click="goone()">
							 <p>{{item.p1}}</p>
						 </view>
						 <view class="contents" v-if="listIndex==2" v-for="(item,index) in list4" :key="index" @click="goone()">
						   <p>{{item.p1}}</p>
						 </view>
						 <view class="contents" v-if="listIndex==3" v-for="(item,index) in list5" :key="index" @click="goone()">
						   <p>{{item.p1}}</p>
						 </view>
				  </view>
				  
				  
				  
				</view>
			</view>
		</view>
		<view class="foot_box">
			<view class="foot flex">
				<view class="but1 flex">
					<image src="../../static/d.png" mode=""></image>
					<button>电话客服</button>
				</view>
				<view class="but2 flex">
					<image src="../../static/k.png" mode=""></image>
					<button>在线客服</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[{img:'../../static/f5.png',text:'发票服务',id:'1'},{img:'../../static/f6.png',text:'省钱会员',id:'2'},{img:'../../static/f7.png',text:'订单服务',id:'3'},{img:'../../static/f8.png',text:'车辆认证',id:'4'}],
				navList:[{name:"常见问题",id:'1'},{name:"会员问题",id:'2'},{name:"优惠券相关",id:'3'},{name:"加油常识",id:'2'}],
				listIndex:0,
				list2:[
					{p1:"如何认证，成为团油认证用户？",id:"1"},
					{p1:"如何加油?",id:"2"},
					{p1:"服务费规则",id:"3"},
					{p1:"查询我的加油订单",id:"4"},
					{p1:"油站开票还是团油开票?",id:"5"},
					{p1:"开具发票",id:"6"},
					{p1:"付错油站\付错金额\付错油号\付错枪号，怎么办？",id:"7"},
					{p1:"油站不让加油，怎么办？",id:"8"},
					{p1:"为什么我加油付款的实际金额比加油金额高？",id:"9"},
				],
				list3:[
					{p1:"如何关闭自动续费",id:"1"},
					{p1:"自动续费扣款规则",id:"2"},
					{p1:"为什么我买的会员权益未发放",id:"3"},
					{p1:"我购买了会员后，为什么没有扣除红包",id:"4"},
					{p1:"会员专享红包的使用规则和限制?",id:"5"},
					{p1:"购买了会员，红包可以退款吗？",id:"6"},
					{p1:"为什么会员的购买价格会不一致？",id:"7"},
				],
				list4:[
					{p1:"优惠券使用不了",id:"1"},
					{p1:"优惠券未到账",id:"2"},
					{p1:"优惠券包没使用完，能退吗？",id:"3"},
					{p1:"优惠券使用方法",id:"4"},
					{p1:"之前购买优惠券包是因为可以在团油APP/小程使用，现在油站和团油",id:"5"},
					{p1:"优惠券使用条件",id:"6"},
					{p1:"我要优惠",id:"7"},
					{p1:"为什么我之前购买的优惠券找不到了？",id:"8"},
				],
				list5:[
					{p1:"	如何联系油站？",id:"1"},
					{p1:"如何能保证油品的质量没有问题？",id:"2"},
					{p1:"加油过程中频繁跳枪是否影响加油多少？",id:"3"},
				]
			}
		},
		methods:{
			checkListIndex(index){
			  this.listIndex=index;
			},
			goNews:function(id){
						if ( id ==1){
							uni.navigateTo({
								url:'./fapiao'
							})
						} else if (id == 2){
							uni.navigateTo({
								url:'./huiyuan'
							})
						} else if ( id == 3){
							uni.switchTab({
								url:'../dingdan/dingdan'
							})
						} else if(id==4){
							uni.navigateTo({
								url:'../index/renZ'
							})
						}
					},
					goone:function(){
						uni.navigateTo({
							url:"../me_two/c_one1"
						})
					},
						
					input:function(){
						uni.navigateTo({
							url:'../me_two/input1'
						})
					}
		}
	}
</script>

<style>
	.flex {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	.box{background-color: #fff;width:90%;margin:20rpx auto;padding:20rpx;border-radius:20rpx;}
		.box1{background-color: #fff;width:90%;padding:20rpx;border-radius:20rpx;margin: 0 auto;}
	.kf_top{width:80%;text-align: center;padding:10rpx 0 40rpx 0;}
	.kf_top dl dt image{width:50px;height:50px;}
	.b_b_one{border-bottom:1px solid #ccc;padding:20rpx 0;}
	.b_b_one input{background: url("../../static/sou.png") no-repeat;background-size: 10% 100%;padding-left:50rpx;}
	.head-nav{
	  margin:20rpx auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.activite{
	  font-weight: bold;
		color: #f00;
		background-color: rgba(249,6,40,0.1);
	}
	.head-nav>view{
	  padding:15rpx;
		border-radius:20rpx;
		background-color:#f6f7fa;
	}
	.contents{color: #ccc;}
	.contents p{padding:20rpx;}
	.foot_box{position: fixed;z-index: 0;bottom:5rpx;background-color: #f6f7fa;width:100%;}
	.foot{width:90%;margin:0 auto;padding:20rpx;}
	.but1{width:45%;text-align: center;border-radius:50rpx;background-color: #dbe0ef;}
	.but1 button{width:80%;margin:0 auto;border-radius:50rpx;background-color: #dbe0ef;}
	.but1 image{width:20px;height:20px;padding-left:30rpx;}
	.but2{width:45%;text-align: center;background-color: #f00;border-radius:50rpx;}
	.but2 button{width:70%;background-color: #f00;border-radius:50rpx;}
	.but2 image{width:20px;height:20px;padding-left:30rpx;}
</style>